<template>
    <div class="activityList">
        <top-bar :isBlack="true" title="推广记录"></top-bar>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
            <div class="list-wrapper">
                <div class="item" v-for="item in list" :key="item.id">
                    <div class="title">{{ item.title }}</div>
                    <div class="info-wrapper">
                        <div class="info">
                            <img src="@/assets/icon_11.png" alt="" class="icon" />
                            <p>{{ item.hotel }}</p>
                        </div>
                        <div class="info">
                            <img src="@/assets/icon_12.png" alt="" class="icon" />
                            <p>{{ item.start_time }} -- {{ item.end_time }}</p>
                        </div>
                    </div>
                    <div class="img-wrapper">
                        <img :src="item.image" alt="" class="img" />
                    </div>
                    <div class="status-wrapper">
                        <p class="time">申请时间：{{ item.created_at }}</p>
                        <p v-if="item.verify == 1" class="status active" :class="{ active: item.verify }">
                            通过
                        </p>
                        <p v-else-if="item.verify == 2" class="status disable">未通过</p>
                        <p v-else class="status">待审核</p>
                    </div>
                    <div class="huifu-wrapper" v-if="item.replay">
                        <p class="label">回复：</p>
                        <p class="desc">{{ item.replay }}</p>
                    </div>
                </div>
            </div>
        </van-list>
        <div class="btn-wrapper">
            <van-button color="#224448" block @click="goReturn">返回</van-button>
        </div>
    </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
export default {
    name: "activityList",
    data() {
        return {
            list: [],
            loading: true,
            finished: false,
            page: 0,
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        goReturn() {
            this.$router.go(-1);
        },
        getList() {
            this.$api.activities({ page: ++this.page, type: 1 }).then((res) => {
                this.loading = false;
                if (res.status_code == 200) {
                    this.list.push(...res.data.data);
                    if (this.list.length >= res.data.total) {
                        this.finished = true;
                    }
                }
            });
        },
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.activityList {
    .van-button {
        height: 54px;
    }
    .van-button--normal {
        font-size: 16px;
    }
}
</style>
<style lang="scss" scoped>
.activityList {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #f4f4f4;
    overflow-y: auto;
    padding-bottom: 56px;
    .list-wrapper {
        .item {
            background-color: #fff;
            .title {
                background: #224448;
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                line-height: 40px;
                padding-left: 20px;
            }

            .info-wrapper {
                padding-top: 20px;
                margin: 0 15px;
                border-bottom: 1px solid #f4f4f4;
                .info {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    .icon {
                        width: 14px;
                        height: auto;
                        margin-right: 15px;
                    }
                    p {
                        font-size: 14px;
                        font-weight: bold;
                        color: #333333;
                    }
                }
            }

            .img-wrapper {
                margin: 20px 15px 16px;
                .img {
                    display: block;
                    width: 100%;
                    height: auto;
                    // object-fit: contain;
                }
            }

            .status-wrapper {
                display: flex;
                padding: 0 15px 22px;
                justify-content: space-between;
                .time {
                    font-size: 14px;
                    font-weight: bold;
                    color: #333333;
                }

                .status {
                    font-size: 14px;
                    font-weight: 500;
                    color: #999;
                    &.active {
                        color: #224448;
                    }
                    &.disable {
                        color: #d21e1e;
                    }
                }
            }

            .huifu-wrapper {
                padding: 0 15px 36px;
                .label {
                    font-size: 16px;
                    font-weight: bold;
                    color: #333333;
                    margin-bottom: 15px;
                }

                .desc {
                    background: #f4f4f4;
                    padding: 12px 15px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #333333;
                    line-height: 20px;
                }
            }
        }
    }
    .btn-wrapper {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
    }
}
</style>
